<template>
  <div id="customer">
    <div class="weui-search-bar sousuo" id="search_bar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
                <a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
            </div>
            <label for="search_input" class="weui-search-bar__label" id="search_text">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
    </div>
    <div class="customerList">

        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                钱亮
            </div>
        </div>
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是理财师
            </div>
        </div>
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div> 
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>  
        <div class="item">
            <img src="http://wx.qlogo.cn/mmopen/iaaDjDDRGuZ9LQ5Ltn6NHzyjo03cic4ddicoMFztR8FbKH2w9Riap9l4zgTRlwFsFp41eZiaEY50452IqYQKXvopRLJiarJO6KjLVI/0" alt="">
            <div class="customerName">
                我是客户啊
                <p>2次预约购买</p>
            </div>
        </div>               
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
*{
    box-sizing: border-box;
}
#customer{
    padding-bottom: 4rem;
    padding-top:2.5rem; 
}
.sousuo{
    width: 100%;
    position: fixed;
    clear: both;
    top:0;
}
.item{
    width: 100%;
    height: 3rem;
    text-align: center;
    clear: both;
    display: flex;
    flex-direction: row;
    margin-top: .5rem;
}
.item img{
    margin-left: .5rem;
    max-width: 3rem;
    height: 3rem;
    border-radius:50%; 
    flex: 1;
}
.customerName{
    line-height: 1.2rem;
    padding:.3rem 1rem;
    text-align: left;
    flex:4;
}
.customerName>p{
    font-size: .5rem;
    color:#ccc;
}
</style>


